<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				width: 100%;
				height: 1000000px;
				background-image: url(img/皮卡丘.png);
				background-size: contain;
				/* 函数 cover 等比例放大图片  特点：原图按照比例放大存背景空间
				       【开发者：背景图大小是否等于背景空间】
				     contain 等比例缩放图片  特点：图片按照比例缩放存背景空间
					   【开发者：背景图等比例显示再背景空间】 
				 */
				/*背景附件--尺寸中存在cover或者contain*/
				background-attachment: scroll;/*背景图固定固定   scroll 不固定*/
				
			}


			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #aaffff;
				background-image: url(img/皮卡丘.png);
				/*问题： 超大图-不显示   小图-显示  
				注意：背景空间大小，如果图小于背景空间---平铺
				*/
			   background-repeat: no-repeat;  
			   /*不平铺   repeat-x 横向平铺 repeat-y 纵向平铺*/
			   background-size: 30%;
			   /*背景尺寸属性值：数值px % |函数 cover contain*/
			   /*背景定位：前提背景空间大于背景图 关键字：center、left、right、top、bottom*/
			   background-position: 100% 100%;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam consequuntur officia, dolore voluptatum error assumenda ipsam in dolores dolorum totam accusamus corrupti veniam sit, delectus ipsa similique reprehenderit. Repudiandae, minus.
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo commodi hic iste cum nisi ullam eius dolor amet! Facere tempore minus rem quod excepturi repellendus corporis nihil ipsum ab perferendis.
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni eum iure in omnis quia facilis doloremque nam voluptates cumque, vitae, culpa assumenda sint perspiciatis suscipit aspernatur, maxime rem obcaecati ducimus.
		<!-- html img图片  引入一张图片，位置不可随意改变
		     css  背景图片  引入一张图片，位置可以随意改变
			  子属性 background-color 背景颜色
			        background-image 背景图
					background-repeat 背景重复
					background-size 背景尺寸
					background-attachment 背景附件
					background-position 背景定位
			  复合属性 background: background-image background-color background-position 
			     (排序)           background-size background-repeat和background-attachment  
			  
			  简写属性 background: background-image background-position|background-size background-repeat;
			  替代子属性 background-image、background-color、background-repeat
		   -->
		   <div></div>
	</body>
</html>